<template>
  <div class="sort-list">
    <el-card class="box-card">
      <el-button class="add-btn" @click="addSort">新增分类</el-button>
      <div class="main_table" style="min-height: 600px">
        <MainTable
          ref="sortTable"
          :loading="listLoading"
          :columns="columns"
          :tableData="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="管理操作">
            <template slot-scope="scope">
              <div class="table-btn">
                <p class="btn-edit" @click="editSort(scope.row)">编辑</p>
                <p class="btn-delete" @click="deleteSort(scope.row)">删除</p>
              </div>
            </template>
          </el-table-column>
        </MainTable>
      </div>
      <div class="footer_pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout=" ->,total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <MainDialog
      :title="sortId ? '编辑分类' : '新增分类'"
      :showDialog="dialogVisible"
      width="484px"
      @close="handleClose">
      <template v-slot:content>
        <el-form ref="sortDescribeRef" class="sort-form" :model="sortForm" :rules="rules" hide-required-asterisk label-width="80px">
          <el-form-item label="分类名称：" prop="name">
            <el-input v-model="sortForm.name" placeholder="分类名称" maxlength="10" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="分类描述：" prop="describe">
            <el-input v-model="sortForm.describe" placeholder="分类描述" maxlength="10" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:footer>
        <div class="main-dialog-btn align-right">
          <el-button type="success" class="add-btn" @click="handleClose">取消</el-button>
          <el-button type="primary" class="submit" v-repeatClick @click="submit">确认</el-button>
        </div>
      </template>
    </MainDialog>
  </div>
</template>
<script>
  import { getCategoryList, changeCategory, deleteCategory } from '@/api/news/sort'
  import { sortData } from './MockData'
  const { columns } = sortData
  export default {
    name: 'SortList',
    data() {
      return {
        columns,
        listLoading: false,
        tableData: [{ intro: '1' }],
        dialogVisible: false,
        sortForm: {
          name: '',
          describe: '',
        },
        rules: {
          name: [
            { required: true, message: '请填写分类名称', trigger: 'blur' }
          ],
          describe: [
            { required: true, message: '请填写分类描述', trigger: 'blur' }
          ]
        },
        currentPage: 1,
        pageSize: 20,
        total: 0,
        sortId: null,
      }
    },
    methods: {
      getData() {
        const params = {
          page: this.currentPage,
          page_size: this.pageSize,
          need_page: 1
        }
        getCategoryList(params).then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        })
      },
      handleSelectionChange() {},
      //  新增分类
      addSort() {
        this.sortForm.name = ''
        this.sortForm.describe = ''
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.sortDescribeRef.clearValidate()
        })
      },
      //  关闭新增分类弹窗
      handleClose() {
        this.sortId = null
        this.dialogVisible = false
      },
      //  编辑分类
      editSort(row) {
        this.dialogVisible = true
        this.sortForm.name = row.name
        this.sortForm.describe = row.describe
        this.sortId = row.id
        this.$nextTick(() => {
          this.$refs.sortDescribeRef.clearValidate()
        })
      },
      //  删除分类
      deleteSort(row) {
        deleteCategory({ id: row.id }).then(res => {
          if(res.errcode == 0) {
            this.$message.success('删除成功')
            this.getData()
          }else {
            this.$message.info(res.errmsg)
          }
        })
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getData()
      },
      async submit() {
        await this.$refs.sortDescribeRef.validate((valid, fields) => {
          if (valid) {
            const message = this.sortId ? '修改分类成功' : '新增分类成功'
            const url = this.sortId ? '/Article/category-modify' : '/Article/category-add'
            changeCategory(url, { ...this.sortForm, id: this.sortId }).then(res => {
              if(res.errcode == 0) {
                this.$message.success(message)
                this.handleClose()
                this.getData()
              }else {
                this.$message.info(res.errmsg)
              }
            })
          }
        })
      }
    },
    mounted() {
      this.getData()
    }
  }
</script>
<style lang="scss" scoped>
  .box-card {
    width: 100%;
    margin: 0.875rem;
    .el-input {
      width: 100%;
    }
  }
  .sort-form {
    /deep/.el-form-item__label {
      color: #000;
    }
  }
</style>